<template>
  <div class="dashboard-cards">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
          <Detail 
            title="日用户量" 
            :count="metrics.users.daily || 0" 
            :trend="metrics.users.trend || 0"
            color="#1890ff"
            cardType="gradient"
            icon="el-icon-user"
            :loading="loading.users"
            :timeValue="updateTime || '正在加载...'">
            <template slot="footer">
              <div class="footer-content">
                <span class="total-count">
                  <i class="el-icon-user-solid"></i>
                  总用户量 {{metrics.users.total || 0}}
                </span>
                <span class="growth-rate">
                  <i class="el-icon-data-line"></i>
                  周增长 {{metrics.users.weekGrowth || 0}}%
                </span>
              </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
          <Detail 
            title="日访问量" 
            :count="metrics.visits.daily || 0" 
            :trend="metrics.visits.trend || 0"
            color="#52c41a"
            cardType="gradient"
            icon="el-icon-view"
            :loading="loading.visits"
            :timeValue="updateTime || '正在加载...'">
            <template slot="footer">
              <div class="footer-content">
                <span class="total-count">
                  <i class="el-icon-monitor"></i>
                  总访问量 {{metrics.visits.total || 0}}
                </span>
                <span class="growth-rate">
                  <i class="el-icon-data-line"></i>
                  周增长 {{metrics.visits.weekGrowth || 0}}%
                </span>
              </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
          <Detail 
            title="日评论量" 
            :count="metrics.comments.daily || 0" 
            :trend="metrics.comments.trend || 0"
            color="#faad14"
            cardType="gradient"
            icon="el-icon-chat-dot-round"
            :loading="loading.comments"
            :timeValue="updateTime || '正在加载...'">
            <template slot="footer">
              <div class="footer-content">
                <span class="total-count">
                  <i class="el-icon-chat-dot-square"></i>
                  总评论量 {{metrics.comments.total || 0}}
                </span>
                <span class="growth-rate">
                  <i class="el-icon-data-line"></i>
                  周增长 {{metrics.comments.weekGrowth || 0}}%
                </span>
              </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="dashboard-card" :body-style="{ padding: '0px' }">
          <Detail 
            title="月文章数" 
            :count="metrics.articles.daily || 0" 
            :trend="metrics.articles.trend || 0"
            color="#722ed1"
            cardType="gradient"
            icon="el-icon-document"
            :loading="loading.articles"
            :timeValue="updateTime || '正在加载...'">
            <template slot="footer">
              <div class="footer-content">
                <span class="total-count">
                  <i class="el-icon-folder"></i>
                  总文章数 {{metrics.articles.total || 0}}
                </span>
                <span class="growth-rate">
                  <i class="el-icon-data-line"></i>
                  周增长 {{metrics.articles.weekGrowth || 0}}%
                </span>
              </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail"
import { getBaseStats, getRealtimeStats } from '@/api/dashboard/card'
export default {
  name: 'Card',
  components: {
    Detail
  },
  data() {
    return {
      metrics: {
        users: { daily: 0, total: 0, trend: 0, weekGrowth: 0 },
        visits: { daily: 0, total: 0, trend: 0, weekGrowth: 0 },
        comments: { daily: 0, total: 0, trend: 0, weekGrowth: 0 },
        articles: { daily: 0, total: 0, trend: 0, weekGrowth: 0 }
      },
      loading: {
        users: false,
        visits: false,
        comments: false,
        articles: false
      },
      updateTime: '',
      baseStatsTimer: null,
      realtimeStatsTimer: null
    }
  },
  created() {
    this.initData()
  },
  beforeDestroy() {
    this.clearTimers()
  },
  methods: {
    async initData() {
      try {
        // 获取基础数据（不频繁变化的数据）
        const baseStats = await getBaseStats()
        this.updateBaseStats(baseStats.data)
        
        // 获取实时数据
        await this.fetchRealtimeStats()
        
        // 设置定时器
        this.setupTimers()
      } catch (error) {
        console.error('初始化数据失败:', error)
        this.$message.error('获取数据失败，请稍后重试')
      }
    },
    
    setupTimers() {
      // 基础数据每5分钟更新一次
      this.baseStatsTimer = setInterval(async () => {
        try {
          const baseStats = await getBaseStats()
          this.updateBaseStats(baseStats.data)
        } catch (error) {
          console.error('更新基础数据失败:', error)
        }
      }, 5 * 60 * 1000)
      
      // 实时数据每30秒更新一次
      this.realtimeStatsTimer = setInterval(async () => {
        await this.fetchRealtimeStats()
      }, 30 * 1000)
    },
    
    clearTimers() {
      if (this.baseStatsTimer) clearInterval(this.baseStatsTimer)
      if (this.realtimeStatsTimer) clearInterval(this.realtimeStatsTimer)
    },
    
    async fetchRealtimeStats() {
      try {
        const realtimeStats = await getRealtimeStats()
        this.updateRealtimeStats(realtimeStats.data)
        this.updateTime = new Date().toLocaleTimeString()
      } catch (error) {
        console.error('获取实时数据失败:', error)
      }
    },
    
    updateBaseStats(data) {
      // 更新不频繁变化的数据
      this.metrics.users.total = data.users.total
      this.metrics.visits.total = data.visits.total
      this.metrics.comments.total = data.comments.total
      this.metrics.articles.total = data.articles.total
      
      this.metrics.users.weekGrowth = data.users.weekGrowth
      this.metrics.visits.weekGrowth = data.visits.weekGrowth
      this.metrics.comments.weekGrowth = data.comments.weekGrowth
      this.metrics.articles.weekGrowth = data.articles.weekGrowth
    },
    
    updateRealtimeStats(data) {
      // 更新实时数据
      this.metrics.users.daily = data.users.daily
      this.metrics.visits.daily = data.visits.daily
      this.metrics.comments.daily = data.comments.daily
      this.metrics.articles.daily = data.articles.daily
      
      this.metrics.users.trend = data.users.trend
      this.metrics.visits.trend = data.visits.trend
      this.metrics.comments.trend = data.comments.trend
      this.metrics.articles.trend = data.articles.trend
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-cards {
  padding: 20px;
  
  .el-row {
    margin-bottom: 20px;
  }
}

.dashboard-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    &::before {
      opacity: 1;
    }
  }
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  
  .total-count, .growth-rate {
    display: flex;
    align-items: center;
    gap: 6px;
    
    i {
      font-size: 16px;
      transition: transform 0.3s ease;
    }
    
    &:hover i {
      transform: scale(1.2);
    }
  }
  
  .total-count {
    font-size: 14px;
    color: #595959;
    font-weight: 500;
  }
  
  .growth-rate {
    font-size: 12px;
    color: #8c8c8c;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.03);
  }
}

@media screen and (max-width: 768px) {
  .dashboard-cards {
    padding: 10px;
  }
  
  .dashboard-card {
    margin-bottom: 10px;
  }
  
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>